A sprite is a collection of images that have been combined into a single image. Using CSS, you can shift the image around to only display parts of it. The advantage of using sprites is that you can reduce the number of server requests to load images (only one image is loaded), and that improves performance.
One way to use sprites in iMIS is for rollover effects on navigation items.
To implement image sprites for navigation items
1. Edit the website theme’s skin file.
□ Using your preferred text editor, find and open the website theme’s skin file (for example Aspen.skin). Skin files, by default, are located in the theme folders within C:\Program Files\ASI\iMIS\Net\App_Themes.
□ Find the pageNavR control and update it to add the following property:
EnableImageSprites=”true”
When enabled, a new class named rmLeftImage is added to root level links in PageNavR.
2. Create the sprite file.
□ Using an image editor like Adobe Photoshop, or a free alternative like GIMP, create your sprite by adding the images you want to a single image, like the following:
□ Save the sprite to the website theme’s image folder.
3. Edit the theme’s 99-[theme].css file to define the classes to control the sprite.
□ Use a tool like SpriteCow to determine the position values of the images in the sprite.
□ Using your preferred text editor, find and open the website theme’s 99-[theme].css file, located by default in the theme folders within C:\Program Files\ASI\iMIS\Net\App_Themes.
□ Add styles for the sprite. For example:
.RadMenu a.rmRootLink.CartLink .rmLeftImage
{
Background-image: url(images/cartsprite.png);
Background-repeat: no-repeat;
Background-position: -1px -1px;
Width: 48px;
Height: 36px;
}
.RadMenu a.rmRootLink.CartLink:hover .rmLeftImage, .RadMenu a.rmRootLink.CartLink.rmExapnded .rmLeftImage, .RadMenu a.rmRootLink.CartLink.rmFocused .rmLeftImage
{
Background-position: -1px -39px;
}
The first group of selectors sets the resting position for the image sprite. The second group of selectors defines the hover state and shifts the image when the link is rolled over.
4. Apply the sprite class to the appropriate navigation items.
□ In iMIS, from Site designer > Manage sitemaps, edit the navigation item for which you want to apply the sprite hover effect (for example, the Shop).
□ For the CSS Class property, enter the sprite class (for example, CartLink).
□ Save and Publish the navigation items.